{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-md-6">
                            <div class="card bor" style="height: 100%;">
                                <div class="card-dth" >
                                    <div class="user">
                                        <div class="user-name">社群数据</div>
                                        <div class="u-rig">
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="k"></text>
                                                    <text class="str">社群总数</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$resource_data.countResource}
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                    <div class="bg-txt">
                                                    <text class="h"></text>
                                                        <text class="str">当月新增数量</text>
                                                    </div>
                                                    <div class="bg-str">
                                                        {$resource_data.countResourceMonth}
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                    <canvas id="post" height="98"></canvas>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-6">
                            <div class="card bor " style="height: 100%;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">社群地区分布</div>
                                    </div>
                                    <div style="text-align: center">
                                        <canvas id="comm-city" height="248" width="400"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row" >
                        <div class="col-md-6">
                            <div class="card bor" style="height: 100%;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">行业数据</div>
                                    </div>
                                    <div class="bg-txt male">
                                        <text class="k color-total"></text>
                                        <text class="str">当日新增</text>
                                        <text class="d-add">{$cate_data.todayResource}</text>
                                    </div>
                                    <div class="head-dfix">
                                        <div class="d-left">
                                            <canvas id="xuqiu" width="150" height="150"></canvas>
                                        </div>
                                        <div class="tab-list">

                                            {volist name="$cate_data.resourceCate.resourceCate" id="val"}
                                            <div class="tabname">
                                                <div class="yuan" style="background:{$val.color}"></div>
                                                <div class="c-name">
                                                    {$val.name}
                                                </div>
                                                <div class="c-num">
                                                    {$val.nums}
                                                </div>
                                            </div>
                                            {/volist}

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input id="datas" type="hidden" value="{$cate_data.resourceCate.line_data.datas}" name="datas">

                        <div class="col-md-6">
                            <div class="card bor" style="height: 100%;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">合作社群分类</div>
                                    </div>
                                    <div style="height: 34px">

                                    </div>
                                    <div class="head-dfix">
                                        <div class="d-left" style="width: 50%;
    text-align: center;">
                                            <canvas id="hezuo" width="152" height="152"></canvas>
                                        </div>
                                        <div class="d-rigth">

                                            <div class="male m-dfix mt-25">
                                                <div class="bg-txt bg-wth">
                                                    <text class="yuan yz"></text>
                                                    <text class="str">优质社群</text>
                                                </div>
                                                <div class="d-add">{$work_data.countHighResource}</div>
                                            </div>

                                            <div class="male m-dfix mt-25">
                                                <div class="bg-txt bg-wth">
                                                    <text class="yuan fws"></text>
                                                    <text class="str">服务商</text>
                                                </div>
                                                <div class="d-add">{$work_data.countServiceResource}</div>
                                            </div>

                                            <div class="male m-dfix mt-25">
                                                <div class="bg-txt bg-wth">
                                                    <text class="yuan hz"></text>
                                                    <text class="str">合作伙伴</text>
                                                </div>
                                                <div class="d-add">{$work_data.countPartnerResource}</div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-12" style="margin-top: 15px;">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">审核数据</div>
                                    </div>
                                    <div class="dfx">
                                        <div class="col-md-4 br">
                                            <canvas id="webapp" width="152" height="152"></canvas>
                                            <div class="righ">
                                                <div class="num-total scolor">{$check_data.resourcePass}</div>
                                                <div class="d-state">已审核通过</div>
                                                <div class="desc">占所有社群的{$check_data.resourcePassScale}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 br">
                                            <canvas id="webapp2" width="152" height="152"></canvas>
                                            <div class="righ">
                                                <div class="num-total scolor2">{$check_data.resourceReject}</div>
                                                <div class="d-state">驳回社群</div>
                                                <div class="desc">占所有社群的{$check_data.resourceRejectScale}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 br">
                                            <canvas id="webapp3" width="152" height="152"></canvas>
                                            <div class="righ">
                                                <div class="num-total scolor3">{$check_data.resourceCheck}</div>
                                                <div class="d-state">未审核社群</div>
                                                <div class="desc">占所有社群的{$check_data.resourceCheckScale}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input id="datas1" type="hidden" value="{$resourceArea.datas}" name="datas1">
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>

<script>

    // 社群数据
    let labels = "{$resource_data.resourceMonthLine.labels}";
    let datas = "{$resource_data.resourceMonthLine.datas}";
    let dataDay = labels.split(',');
    let dataValue = datas.split(',');

    // let dataDay = [];
    // let dataValue = [22];
    // for (var i = 1;i < 31;i++){
        // dataDay.push(i);
        // dataValue.push(Math.random() * 20);
    // }
    console.log(dataDay,dataValue)
    let data1 = {
        labels: dataDay,
        datasets: [
            {
                label: "社群数据",
                backgroundColor: "#F9F6FF",
                borderWidth: 1,
                pointBackgroundColor: "#F2FBFF",
                pointBorderColor: "#F9F6FF",
                borderColor: "#F74AFF",
                pointRadius: 0,
                lineTension: 0,
                spanGaps: 5,
                data: dataValue
            }
        ]
    };
    new Chart(document.getElementById("post"), {
        type: 'line',
        data: data1,
        options: {
            title: {
                display: true,
            },
            legend: {display: false},
            splitLine: {show: false},
            elements: {
                line: {
                    tension: 0 // 禁用贝塞尔曲线
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: true,
                        color: "#F5F5F5",
                    },
                    // 负数处理
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }
                        },
                    }
                }]
            }
        }
    });

    // 合作社群分类
    var chartDom = document.getElementById('hezuo');
    var myChart = echarts.init(chartDom);
    var option = {
        title: '',
        tooltip : { //提示框组件
            trigger: 'item', //触发类型(饼状图片就是用这个)
            formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
        },
        color:['#8FDFFE','#F25021','#5B78FF'],  //手动设置每个图例的颜色
        series : [ //系列列表
            {
                name:'设备状态',  //系列名称
                type:'pie',   //类型 pie表示饼图
                center:['50%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                radius: ['73%', '95%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                itemStyle : {  //图形样式
                    normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label : {  //饼图图形上的文本标签
                            show : false  //平常不显示
                        },
                        labelLine : {     //标签的视觉引导线样式
                            show : false  //平常不显示
                        }
                    },
                    emphasis : {   //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label : {  //饼图图形上的文本标签
                            show : true,
                            position : 'center',
                            textStyle : {
                                fontSize : '10',
                                fontWeight : 'bold'
                            }
                        }
                    }
                },
                data:[
                    {value:"{$work_data.countHighResource}", name:'优质社群'},
                    {value:"{$work_data.countServiceResource}", name:'服务商'},
                    {value:"{$work_data.countPartnerResource}", name:'合作伙伴'}
                ]
            }
        ]
    };
    myChart.setOption(option);


    // 社群地区分布
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('comm-city'));
    var str1 = $('#datas1').val().split(';');
    var arr1 = [];
    for (var ii in str1) {
        // 转换成对象
        var obj1 = eval('(' + str1[ii] + ')');
        console.log(obj1);
        arr1.push(obj1)
    }
    console.log(arr1);
    // 指定图表的配置项和数据
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: "{$resourceArea.count}",
            subtext: '地区分布',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'bold',
                fontSize: 20,
                color: '#0E1525'
            }, // 标题
            subtextStyle: {
                fontWeight: 'normal',
                fontSize: 10,
                color: '#0E1525'
            }, // 副标题
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ['#F25021', '#F8AC16', '#4F1DF6', '#5B78FF', '#FF6363', '#29abe2'],
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['42%', '58%'], // 半径
            center: ['50%', '51%'], // 位置
            label: {
                normal: {
                    formatter: '{b} {c}'
                }
            },
            data: arr1,
            labelLine:{
                normal:{
                    length:25,  // 改变标示线的长度
                },
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 行业数据
    var chartDom = document.getElementById('xuqiu');
    var myChart = echarts.init(chartDom);
    var colors = "{$cate_data.resourceCate.line_data.colors}";
    var str = $('#datas').val().split(';');
    var arr = [];
    for (var i in str) {
        // 转换成对象
        var obj = eval('(' + str[i] + ')');
        console.log(obj);
        arr.push(obj)
    }
    console.log(arr);

    var option;
    option = {
        tooltip: {
            show: true,
            trigger: 'item'
        },
        color: colors.split(','),
        series: [
            {
                name: '行业数据',
                type: 'pie',
                radius: ['73%', '85%'],
                avoidLabelOverlap: false,
                hoveranination: false,
                silent: true,
                label: {
                    normal: {
                        show: true,
                        position: 'center',
                        formatter: function (argument) {
                            // var html;
                            // html = nums + '\r\n\r\n' + '社群总数';
                            // return html;
                            return '';
                        },
                        textStyle: {
                            fontSize: 15,
                            color: '#19191A',
                            fontWeight: 600
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: arr
            }
        ]
    };
    option && myChart.setOption(option);

    // 审核数据
    var chartDom = document.getElementById('webapp');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: "{$check_data.resourcePassScale}",
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourcePass}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#5B78FF'},
                                    {offset: 0.5, color: '#4A39ED'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastPass}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);

    var chartDom = document.getElementById('webapp2');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: "{$check_data.resourceRejectScale}",
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourceReject}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#FFA13B'},
                                    {offset: 0.5, color: '#FF4438'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastReject}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);


    var chartDom = document.getElementById('webapp3');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: "{$check_data.resourceCheckScale}",
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$check_data.resourceCheck}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#00C7FF'},
                                    {offset: 0.5, color: '#322FFD'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$check_data.resourceLastCheck}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);
</script>
<style>
    .card-dth {
        padding: 8px;
    }

    .yz{
        background: #8FDFFE;
    }
    .fws {
        background: #F25021;
    }
    .scolor {
        color: #2E3033;
    }
    .scolor2 {
        color: #FF6739;
    }
    .scolor3 {
        color: #00A0FF;
    }

    .d-state {
        font-size: 13px;
        font-weight: 600;
        margin-top: 15px;
    }
    .desc {
        font-size: 10px;
        color: #999999;
    }

    .hz {
        background: #5B78FF;
    }
    .mt-25 {
        margin-bottom: 23px
    }
    .br {
        border-right: 1px solid #E6E6E6;
        display: flex;
    }
    .righ {
        margin-top: 30px;
        width: 100%;
        text-align: center;
    }
    .num-total {
        font-size: 22px;
        font-weight: 800;
    }

    .dfx {
        display: flex;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
    }

    .m-dfix {
        display: flex;
        position: relative;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }

    .u-rig {
        display: flex;
        justify-content: space-between;
        /*width: 50%;*/
        /*margin-right: 20px;*/
    }

    .u-left {
        text-align: center;
        margin-left: 20px;
    }

    .bg-txt {
        display: flex;
        text-align: center;
    }
    .bg-wth {
        width: 62px;
    }
    .k {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .h {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .str {
        font-size: 12px;
        margin-left: 7px;
        color: #999999;
    }

    .bg-str {
        margin-top: 6px;
        color: #000000;
        font-weight: bold;
        font-size: 16px;
    }

    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        width: 98%;
        margin: auto;
    }

    .rig-img {
        margin: 15px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .mt-top {
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .fnt-30 {
        font-size: 25px;
    }

    .mt5 {
        margin-top: 5px;
    }

    .color-total {
        background: #5B78FF !important;
    }

    .color-z {
        background: #E6A500 !important;
    }

    .total-name {
        margin-left: 11px;
        margin-top: 10px;
    }

    .num {
        font-size: 16px;
        color: #000000;
        font-family: 'AliM';
    }

    .visit {
        color: #0DA877;
        font-size: 15px;
        margin-top: 7px;
        font-family: 'AliM';
    }

    .mt-20 {
        margin-top: 40px;
    }

    .male {
        margin-left: 12px;
        margin-top: 15px;
    }

    .d-add {
        color: #000000;
        margin-left: 7px;
        font-size: 18px;
        font-weight: 600;
    }

    .head-dfix {
        width: 96%;
        margin: auto;
        padding-top: 31px;
        display: flex;
    }

    .tab-list {
        margin-left: 80px;
        margin-top: 10px;
        width: 100%;
    }

    .tabname {
        display: inline-block;
        width: 30%;
        position: relative;
        margin-bottom: 20px;
    }

    .yuan {
        width: 12px;
        height: 12px;
        border-radius: 20px;
        position: absolute;
        left: -17px;
        top: 2px;
    }

    .c-name {
        color: #2F3133;
        font-size: 13px;
    }

    .c-num {
        margin-top: 2px;
        color: #2F3133;
        font-weight: 600;
    }

    .order-list {
        width: 96%;
        padding-top: 30px;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }

    .o-title {
        color: #999999;
        font-size: 13px;
        font-family: Source Han Sans CN;
    }

    .order-price {
        margin-top: 6px;
        color: #5B78FF;
        font-weight: 600;
        font-size: 20px;
    }

    .color-l {
        color: #5B78FF;
    }

    .color-h {
        color: #E6A500;
    }

    .order-x {
        font-size: 10px;
    }

    .order-bor {
        height: 72px;
        min-width: 75px;
        border: 2px solid #FF3A3A;
        padding: 0px 5px 0px 5px;
        border-radius: 65px;
        text-align: center;
        padding-top: 15px;
    }

    .tk-num {
        color: #FF3A3A;
        font-family: 'AliM';
        font-size: 17px;
    }

    .tk-str {
        color: #B8B8B8;
        font-size: 10px;
    }

    .order-vip {
        width: 48%;
        background: #FDFBF2;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .vip-d {
        width: 20%;
    }

    .vip-img {
        width: 52px;
        height: 52px;
    }

    .d-rig {
        width: 40%;
    }

    .ord-tit {
        color: #666666;
        font-size: 10px;
    }

    .price {
        margin-top: 10px;
        font-size: 18px;
        color: #0DA877;
    }

    .rig {
        width: 30%;
        color: #17181A;
        font-weight: 600;
        line-height: 25px;
        font-size: 18px;
        text-align: right;
    }

    .color-h-clor {
        margin-left: 10px;
        color: #FF3A3A;
        position: absolute;
        right: 10px;
        bottom: 16px;
        font-size: 18px;
    }
</style>
</body>
</html>